<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div>
        <div class="home">
            <el-row>

                <el-col :span="8">
                    <el-card shadow="hover" class="box-card centered-card">
                        <div>
                            用户数量
                            <el-tag type="success">{{ userCount }}</el-tag>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" class="box-card centered-card">
                        <div>
                            文件数量
                            <el-tag type="success">{{ fileCount }}</el-tag>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" class="box-card centered-card">
                        <div>
                            资讯数量
                            <el-tag type="success">{{ articleCount }}</el-tag>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-card shadow="hover" class="box-card centered-card">
                        <div id="container1" style="height: 320px;width: 500px;text-align: center;">
                            <el-tag type="success">用户角色比例统计</el-tag>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card shadow="hover" class="box-card centered-card">
                        <div id="container2" style="height: 320px;width: 500px;text-align: center;">

                            <el-tag type="success">菜单类型比例统计</el-tag>
                        </div>
                    </el-card>
                </el-col>
            </el-row>


        </div>
        <div style="margin-top: 20px;">
            <strong>公告通知</strong>
            <el-timeline style="margin-top: 25px;">
                <el-timeline-item v-for="item in noticeData" :key="item.id" :timestamp="formatTime(item.createTime)"
                    placement="top">
                    <el-card shadow="hover" style="text-align: left;">
                        <div>
                            {{ item.title }}
                        </div>
                        <div v-html="item.content">
                        </div>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
        </div>

    </div>
</template>
<script setup>

import { ref, onMounted } from 'vue'
import * as echarts from "echarts"
import api from '@/axios/index'

// 响应式数据
const userCount = ref(0)
const fileCount = ref(0)
const articleCount = ref(0)
const noticeData = ref([])
function formatTime(time) { 
            let dt = new Date(time);
            return (dt.getFullYear() + '/' + (dt.getMonth() + 1) + '/' + dt.getDate());
}
const getUserCount = () => {
    api.get('/user/count').then(res => {

        userCount.value = res
    })
    
}
function getFileCount() {
        api.get('/file/count').then(res => {

            fileCount.value = res
        })
    }
function getArticleCount() {
    api.get('/article/count').then(res => {

        articleCount.value = res
    })
}
function getUserType() {
    api.get('/echart/pie1').then(res => {

        draw1(res.data)
    })
}
function getMenuType() {
    api.get('/echart/pie2').then(res => {

        draw2(res.data)
    })
}
const draw1 = (data) => {
    var chartDom = document.getElementById('container1');
    if (echarts.getInstanceByDom(chartDom)) {
        echarts.getInstanceByDom(chartDom).dispose();

    }
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            text: '用户类型比例统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '用户数量',
                type: 'pie',
                radius: '50%',
                data: data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
}
const draw2 = (data) => {
    var chartDom = document.getElementById('container2');
    if (echarts.getInstanceByDom(chartDom)) {
        echarts.getInstanceByDom(chartDom).dispose();

    }
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            text: '菜单类型比例统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '菜单数量',
                type: 'pie',
                radius: '50%',
                data: data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
}
function getNotice() {
    api.get('/notice/list').then(res => {

        noticeData.value = res
    })

}
onMounted(() => {
    getUserCount()
    getArticleCount()
    getMenuType()
    getFileCount()
    getUserType()
    getNotice()

})

</script>
<style scoped>
.home {
    text-align: center;
    background-color: #fff;
}

.box-card {
    height: auto;
    min-height: 50px;
    text-align: center;
    border-radius: 25px;
    margin: 10px;
}

.card-row {
    display: flex;
    justify-content: center;
}

.centered-card {
    display: flex;
    justify-content: center;
    align-items: center;
}

.red {
    background-color: rgb(231, 9, 9);
}

.green {
    background-color: rgb(152, 246, 11);
}

.purple {
    background-color: rgb(135, 53, 212);
}

.blue {
    background-color: rgb(10, 138, 207);
}

.orange {
    background-color: chocolate;
}

.grey {
    background-color: grey;
}

.pink {
    background-color: pink;
}

.gold {
    background-color: goldenrod;
}
</style>